
// 放大镜--------------------------------------------------------
function fdj(data){
$('ul li img').mouseover(function () {
    let imgsrc = $(this).attr('src');
    $('.sm_box img').attr('src', imgsrc);
    $('.big_box img').attr('src', imgsrc);
    $(this).parent().addClass('active').siblings('li').removeClass('active')
});
$('.sm_box').mouseover(function () {
    $('.smbox').show();
    $('.big_box').show();
})
$('.sm_box').mousemove(function (e) {
    var positionX = e.pageX - $(this).offset().left - $('.smbox').width() / 2; //获取当前鼠标相对img的X坐标  
    var positionY = e.pageY - $(this).offset().top - $('.smbox').height() / 2; //获取当前鼠标相对img的Y坐标  
    if (positionX <= 0) {
        positionX = 0;
    }
    if (positionX >= $(this).width() - $('.smbox').width()) {
        positionX = $(this).width() - $('.smbox').width();
    }
    if (positionY <= 0) {

        positionY = 0;

    }
    if (positionY >= $(this).height() - $('.smbox').height()) {
        positionY = $(this).height() - $('.smbox').height() - 4;
    }

    $('.smbox').css({
        top: positionY + 'px',
        left: positionX + 'px'
    });

    $('.big_box img').css({
        top: (-positionY * 2) + 'px',
        left: (-positionX * 2) + 'px'
    })
})
$(".sm_box").mouseout(function () {
    $('.smbox').hide();
    $('.big_box').hide();
});

}

// 结束--------------------------------


function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
}
//接收URL中的参数goodsId
var id = getUrlParam('id');
$.get("./goodsAndShoppingCart/getGoodsInfo.php", { "goodsId":id}, function (data) {
    // console.log(data);
    goods(data);
    
},"json");
// ----------------------------------
function goods(data) {
    let innerstr1 = ""
        innerstr1 +=
            `
            <a  href="shoppinginfo.html?id=${data.goodsId}"  target="_new">
                <div class="box">
                <div class="sm_box">
                    <img src="${data.goodsImg}" alt="">
                    <div class="smbox"></div>
                </div>
                <div class="big_box">
                    <img src="${data.goodsImg}" alt="">
                </div>
            </div>
            <ul class="ul">
                <li class="active"><img src="${data.beiyong2}" alt=""></li>
                <li><img src="${data.beiyong1}" alt=""></li>
                <li><img src="${data.beiyong2}" alt=""></li>
                <li><img src="${data.beiyong3}" alt=""></li>
            </ul>

            </a>
                `;


    $(".fdj .left").html(innerstr1);
    // 调用放大镜
    $(function(){
        fdj(data);

    });
   
// 右边栏=============================================================
let innerstr2=""
        innerstr2+=`
        
        <div class="top">
                <a href="#">红蜻蜓</a>
                <!-- <p>【比翼双蜻蜓面料】波士顿女包复古枕头包手提包印花斜挎包单肩包</p> -->
                <p>2021年秋冬新款荷叶领领口蕾丝简约百搭纯色长袖女式毛衣</p>

            </div>
            <div class="redtop">
                <img src="images/shoppingcar/goods6.png" alt="">
                <div class="one">
                    <i style="font-size: 24px;">￥</i>
                    <span style="font-size: 38px;">${data.goodsPrice}</span>
                    <span style="text-decoration: line-through;">￥${data.goodsDesc}</span>
                    <span>2.4折</span>
                </div>
                <div class="two">
                    <div style="right: 50px;"></div>
                </div>

            </div>
            <div class="send carStyle">
                <i>配送</i>
                <span style="margin-left: 30px"></span>
            </div>
            <div class="yunfei carStyle">
                <i>运费</i>
                <span style="margin-left: 30px;color: black;">新会员专享首单满48元包邮(限唯品自营商品，部分商品不可用)</span>
            </div>
            <div class="color carStyle">
                <i>颜色</i>
                <span style="margin-left: 30px;color: black;">咖啡色</span>
            </div>
            <div class="size carStyle">
                <i>尺码</i>
                <span style="margin-left: 30px;color: black;">
                    <b>s</b>
                    <b>M</b>
                    <b>L</b>
                </span>
            </div>
            <div class="shuliang carStyle">
                <i>数量</i>
                <span style="margin-left: 30px;color: black;">
                    <a id="jian" style="width:20px;height:28px;cursor: pointer">-</a>
                    <em id=total style="color: #666;height: 28px">1</em>
                    <a id="jia" style="width:20px;height:28px;cursor: pointer">+</a>
                </span>
            </div>
            <div class="addbuy carStyle">
                <span style="color: #fff;font-size: 18px;font-weight: 700;">￥299降价前</span>
                <span style="color: #fff;font-size: 18px;font-weight: 700;">￥199特卖价</span>
                <a href="shoppingcar2.html?goodId=${data.goodsId}"class="goumai">
                    <span id="fuKuan" class="zxp" style="color: #fff;font-size: 18px;font-weight: 700;">去购买</span>
                </a>

            </div>

        `
        $(".fdj #right").html(innerstr2);
      
// 获取数量添加到购物车=====================================================

            $(".shuliang #jian").click(function(){
                let count=$("#total").html();
                count--;
                if(count<=0){
                    count=0;
                }
                $("#total").html(count);
                // console.log(count)
            })
            $(".shuliang #jia").click(function(){
                let count=$("#total").html();
                count++;
                $("#total").html(count);
                // console.log(count)
            })
            
            $(".zxp")[0].onclick=function(){
    
                let goodsId=location.search.split("=")[1];
                let username=getCookie("name")
                let goodsCount=$("#total").html();
                $(".goumai").click(function(){
                    $.post("./goodsAndShoppingCart/addShoppingCart.php",{
                        "vipName":username,
                        "goodsId":goodsId,
                        "goodsCount":goodsCount
                    },function(){
                        console.log(data)
                    }

                    )
                })
                // console.log(username);
                // console.log(username)
                // console.log(goodsId)
                    // if(username==undefined){
                    //     location.href="./register.html"

                    // }else{
                    //         $.post("./goodsAndShoppingCart/addShoppingCart.php",
                    //         {
                            
                    //             "vipName":getCookie("name"),
                    //             "goodsId":id,
                    //             "goodsCount":$(".shuliang #total").html()
                    //         },function(){
                                
                    //         }
                        
                    //     )
                        
                    // }

            }

      

//跳转购物车


        // 底边细节展示
        let innerstr3=""
        innerstr3+=`
        <ul class="canshu">
            <li>规格参数</li>
            <li>商品展示</li>
            <li>全部评价</li>
            <li>商品咨询</li>
            <li>关于我们</li>
            
        </ul>

        <div class="gdshow">
      
            <img src="${data.beiyong1}" alt="">
            <img src="${data.beiyong2}" alt="">
            <img src="${data.beiyong3}" alt="">
            <img src="${data.beiyong4}" alt="">
        </div>


        
        `
        $(".gddetails").html(innerstr3);


   
}



